<template>
  <a-layout class="page-miH page-bgBack">
    <div style="font-size: 18px; font-weight: 500; padding: 24px 24px 0 24px">
      {{ parseInt(moment().format("MM")) === 1 ? moment().format("YYYY") - 1 : moment().format("YYYY") }}年专项附加扣除累计明细（截止{{
        parseInt(moment().format("MM")) === 1 ? 12 : moment().format("MM") - 1
      }}月）
    </div>
    <div class="head">
      <div class="operation">
        <a-input-search allow-clear class="mr12" placeholder="姓名/手机号/身份证号" style="width: 180px" @search="inputChange" />
        <a-select style="width: 180px" @change="handleChange" allowClear placeholder="员工状态">
          <a-select-option value="1"> 待入职 </a-select-option>
          <a-select-option value="2"> 在职 </a-select-option>
          <a-select-option value="3"> 待离职 </a-select-option>
          <a-select-option value="4"> 离职 </a-select-option>
        </a-select>
      </div>
      <div>
        <a-button style="margin-right: 10px" @click="goImport"> 批量导入 </a-button>
        <a-button style="margin-right: 10px" :disabled="!selectedRowKeys.length" @click="() => download(1)"> 批量导出 </a-button>
        <a-button :disabled="!dataList || !dataList.length" type="primary" style="margin-right: 10px" @click="() => download(2)">
          全部导出
        </a-button>
      </div>
    </div>
    <a-modal title="批量导入" :visible="isDaoru" width="730px" @cancel="handleCancel">
      <div slot="footer" />
      <div class="modal-box2" style="display: flex; justify-content: space-between">
        <div class="onwork">
          <a-upload name="file" :multiple="false" accept=".xls,.xlsx" :show-upload-list="false">
            <div class="staffInfo">
              <img src="../../../assets/icons/face.png" alt />
            </div>
            <div style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">点击上传或拖拽上传</div>
            <div sytle="font-size:14px;color:#55565D;font-weight:bold;">人力资源和社会保障局表</div>
            <div sytle="font-size:14px;color:#55565D;font-weight:bold;">社保公积金统计表</div>
          </a-upload>
        </div>
        <div class="onwork" style="margin-left: 15px; margin-right: 15px">
          <div class="staffInfo">
            <img src="../../../assets/icons/face.png" alt />
          </div>

          <div style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">点击上传或拖拽上传</div>
          <div sytle="font-size:14px;color:#55565D;font-weight:bold">医疗保障局表</div>
        </div>
        <div class="onwork">
          <div class="staffInfo">
            <img src="../../../assets/icons/face.png" alt />
          </div>
          <div style="font-size: 12px; color: #a6a8b4; margin-top: 12px; margin-bottom: 16px">点击上传或拖拽上传</div>
          <div sytle="font-size:14px;color:#55565D;font-weight:bold">住房公积金表</div>
        </div>
      </div>
      <div
        style="
          background-color: #faf9f9;
          border-radius: 5px;
          padding-left: 15px;
          padding-top: 15px;
          padding-right: 15px;
          padding-bottom: 15px;
        "
      >
        <div sytle="font-size:14px;color:#55565D;font-weight:bold;">温馨提示</div>
        <div style="font-size: 12px; color: #a6a8b4; margin-top: 12px">1、支持山东地区用户导入从官方网站下载的单位级金额表</div>
        <div style="font-size: 12px; color: #a6a8b4">2、可将社保公积金金额导入标准模板，上传至左侧第一个区域即可</div>
      </div>
    </a-modal>
    <div class="tableBox">
      <a-table
        :scroll="{ x: 1200 }"
        :loading="loading"
        :columns="columns"
        :data-source="dataList"
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange
        }"
      >
        <a slot="name" style="position: relative; cursor: default" slot-scope="text, record">
          <img
            :src="abolitionImg"
            v-if="record.status === 4"
            style="position: absolute; top: -16px; left: -15px; width: 50px; height: 50px"
          />
          <p style="margin-left: 20px; margin-bottom: 0; color: #595959">
            {{ text }}
          </p>
        </a>
        <a slot="action" class="edit" slot-scope="text, record" @click="showEdit(record)"> 编辑 </a>
      </a-table>
      <a-drawer title="修改专项附加扣除累计" placement="right" :visible="visible" @close="onClose" :width="500">
        <a-alert style="font-size: 12px" message="修改本年截止上月为止的专项附加扣除累计值，将会影响本月个税计算" banner closable />
        <!-- <a-modal v-model="visible" title="编辑" @ok="handleOk" :width="700"> -->
        <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol" style="width=100%">
          <a-form-model-item label="员工姓名" style="margin-top: 20px">
            <a-input :min="0" v-model="empDetail.name" placeholder="请输入" :disabled="true" />
          </a-form-model-item>
          <div style="margin: 15px 0">
            <div class="shu">
              <div class="shuxian"></div>
              <div style="color: #000000; font-size: 16px; margin-left: 10px">
                累计专项附加扣除（截止{{ parseInt(moment().format("MM")) === 1 ? 12 : moment().format("MM") - 1 }}月）
              </div>
            </div>
          </div>
          <a-form-model-item label="累计子女教育" ref="sumChildEducation" prop="sumChildEducation">
            <a-input-number :min="0" v-model="empDetail.sumChildEducation" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="累计住房基金" ref="sumHousingRent" prop="sumHousingRent">
            <a-input-number :min="0" v-model="empDetail.sumHousingRent" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="累计住房贷款利息" ref="sumHomeLoanInterest" prop="sumHomeLoanInterest">
            <a-input-number :min="0" v-model="empDetail.sumHomeLoanInterest" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="累计赡养老人" ref="sumSupportOldMan" prop="sumSupportOldMan">
            <a-input-number :min="0" v-model="empDetail.sumSupportOldMan" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="累计继续教育" ref="sumContinuingEducation" prop="sumContinuingEducation">
            <a-input-number :min="0" v-model="empDetail.sumContinuingEducation" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="累计3岁以下婴幼儿照护" ref="sumChildCare" prop="sumChildCare">
            <a-input-number :min="0" v-model="empDetail.sumChildCare" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="累计个人养老金" ref="sumIndividualPensions" prop="sumIndividualPensions">
            <a-input-number :min="0" v-model="empDetail.sumIndividualPensions" placeholder="请输入" />
          </a-form-model-item>
          <div style="margin: 15px 0">
            <div class="shu">
              <div class="shuxian"></div>
              <div style="color: #000000; font-size: 16px; margin-left: 10px">
                单月专项附加扣除（{{ parseInt(moment().format("MM")) === 1 ? moment().format("YYYY") - 1 : moment().format("YYYY") }}年度）
              </div>
            </div>
          </div>
          <a-form-model-item label="单月子女教育" ref="monthlyChildEducation" prop="monthlyChildEducation">
            <a-input-number :min="0" v-model="empDetail.monthlyChildEducation" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="单月住房基金" ref="monthlyHousingRent" prop="monthlyHousingRent">
            <a-input-number :min="0" v-model="empDetail.monthlyHousingRent" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="单月住房贷款利息" ref="monthlyHomeLoanInterest" prop="monthlyHomeLoanInterest">
            <a-input-number :min="0" v-model="empDetail.monthlyHomeLoanInterest" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="单月赡养老人" ref="monthlySupportOldMan" prop="monthlySupportOldMan">
            <a-input-number :min="0" v-model="empDetail.monthlySupportOldMan" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item
            label="单月继续教育"
            ref="monthlyContinuingEducation"
            prop="monthlyContinuingEducation"
            style="margin-bottom: 45px"
          >
            <a-input-number :min="0" v-model="empDetail.monthlyContinuingEducation" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="单月3岁以下婴幼儿照护" ref="monthlyChildCare" prop="monthlyChildCare">
            <a-input-number :min="0" v-model="empDetail.monthlyChildCare" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="单月个人养老金" ref="individualPensions" prop="individualPensions">
            <a-input-number :min="0" v-model="empDetail.individualPensions" placeholder="请输入" />
          </a-form-model-item>
          <div
            :style="{
              position: 'absolute',
              right: 0,
              bottom: 0,
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'right',
              zIndex: 1
            }"
          >
            <a-button :style="{ marginRight: '8px' }" @click="onClose"> 取消 </a-button>
            <a-button type="primary" @click="handleOk"> 提交 </a-button>
          </div>
        </a-form-model>
      </a-drawer>
    </div>
  </a-layout>
</template>
<script>
import { columns } from "./funcs";
import moment from "moment";
import { getSpecialDetails, postSpecialDetails } from "@/api/tax/tax";
import ExportMixin from "xqjr-plugin-common/UploadOrExport/exportMixin";
const mixin = new ExportMixin();
export default {
  mixins: [mixin],
  data() {
    return {
      abolitionImg: require("@/assets/home/lizhi.png"),
      empIdList: [],
      inputName: null,
      empDetail: {},
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      form: {},
      visible: false,
      loading: false,
      selectedRowKeys: [],
      selectRowKey: [],
      dataList: [],
      columns,
      isDaoru: false,
      groupList: [],
      empStatus: undefined,
      companyId: this.$store.state.hr.companyId,
      pagination: {
        pageSize: 10,
        total: 0,
        size: "default",
        current: 1,
        showTotal: (total) => `共 ${total} 条`,
        showQuickJumper: true,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"]
      }
    };
  },

  created() {
    this.getSpecialDetailsList();
  },

  beforeDestory() {},
  methods: {
    handleChange(e) {
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.empStatus = e;
      this.getSpecialDetailsList();
    },
    // onTimeChange(e) {
    //   const bb = parseInt(moment(e).format("MM")) === 1 ? 12 : moment(e).format("MM") - 1;
    //   console.log(e, bb);
    // },
    onClose() {
      this.visible = false;
    },
    handleCancel() {
      this.isDaoru = false;
    },
    onSelectChange(selectedRowKeys, e) {
      this.empIdList = [];
      this.selectedRowKeys = selectedRowKeys;
      e.forEach((item, index) => {
        this.empIdList.push(item.id);
      });
    },
    download(i) {
      const token = this.$store.state.auth.token;
      if (i === 2) {
        this.exportData = {
          companyId: this.companyId,
          empIdList: [],
          status: this.empStatus ? this.empStatus : undefined,
          nameOrPhoneOrIdCard: this.inputName ? this.inputName : undefined
        };
      } else {
        this.exportData = {
          companyId: this.companyId,
          empIdList: this.empIdList
        };
      }
      this.url = `/salary/api/v1/specialAdditionalDetails/export`;
      this.excelName = `${this.$store.state.hr.companyName}_` + "专项附加扣除导出详情" + ".xlsx";
      this.postDownload();
    },
    showEdit(record) {
      this.empDetail = JSON.parse(JSON.stringify(record));
      this.visible = true;
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          postSpecialDetails({
            month: parseInt(moment().format("MM")) === 1 ? 12 : moment().format("MM") - 1,
            year: parseInt(parseInt(moment().format("MM")) === 1 ? moment().format("YYYY") - 1 : moment().format("YYYY")),
            companyId: this.companyId,
            empId: this.empDetail.id,
            id: this.empDetail.specialAdditionalDetailVO ? this.empDetail.specialAdditionalDetailVO.id : null,
            sumChildEducation: this.empDetail.sumChildEducation,
            sumHousingRent: this.empDetail.sumHousingRent,
            sumHomeLoanInterest: this.empDetail.sumHomeLoanInterest,
            sumSupportOldMan: this.empDetail.sumSupportOldMan,
            sumContinuingEducation: this.empDetail.sumContinuingEducation,
            sumChildCare: this.empDetail.sumChildCare,
            sumIndividualPensions: this.empDetail.sumIndividualPensions,

            monthlyChildEducation: this.empDetail.monthlyChildEducation,
            monthlyHousingRent: this.empDetail.monthlyHousingRent,
            monthlyHomeLoanInterest: this.empDetail.monthlyHomeLoanInterest,
            monthlySupportOldMan: this.empDetail.monthlySupportOldMan,
            monthlyContinuingEducation: this.empDetail.monthlyContinuingEducation,
            monthlyChildCare: this.empDetail.monthlyChildCare,
            individualPensions: this.empDetail.individualPensions
          }).then((res) => {
            this.$notification["success"]({
              message: "success",
              description: "编辑成功"
            });
            this.getSpecialDetailsList();
            this.visible = false;
          });
        } else {
          return false;
        }
      });
    },
    handleTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getSpecialDetailsList();
    },
    inputChange(e) {
      this.inputName = e;
      this.pagination.current = 1;
      this.pagination.pageSize = 10;
      this.getSpecialDetailsList();
    },
    goImport() {
      this.$router.push({
        path: "/tax/special/importSpecial",
        query: {}
      });
      // this.isDaoru = true;
    },
    getSpecialDetailsList() {
      this.loading = true;
      getSpecialDetails({
        status: this.empStatus,
        name: this.inputName,
        companyId: this.companyId,
        pageNo: this.pagination.current,
        pageSize: this.pagination.pageSize,
        monthly: parseInt(moment().format("MM")) === 1 ? 12 : moment().format("MM") - 1,
        yearly: parseInt(moment().format("MM")) === 1 ? moment().format("YYYY") - 1 : moment().format("YYYY")
      }).then((res) => {
        this.selectedRowKeys = [];
        this.loading = false;
        this.contractlist = res.data.entities;
        this.pagination.total = res.data && res.data.entityCount;
        this.dataList = res.data.entities;
        if (res.data.entities) {
          res.data.entities.forEach((item, index) => {
            this.dataList[index].name = item.name;
            this.dataList[index].phone = item.phone;
            if (item.specialAdditionalDetailVO) {
              this.dataList[index].sumChildEducation = item.specialAdditionalDetailVO.sumChildEducation
                ? item.specialAdditionalDetailVO.sumChildEducation
                : "";
              this.dataList[index].sumHousingRent = item.specialAdditionalDetailVO.sumHousingRent
                ? item.specialAdditionalDetailVO.sumHousingRent
                : "";
              this.dataList[index].sumHomeLoanInterest = item.specialAdditionalDetailVO.sumHomeLoanInterest
                ? item.specialAdditionalDetailVO.sumHomeLoanInterest
                : "";
              this.dataList[index].sumSupportOldMan = item.specialAdditionalDetailVO.sumSupportOldMan
                ? item.specialAdditionalDetailVO.sumSupportOldMan
                : "";
              this.dataList[index].sumContinuingEducation = item.specialAdditionalDetailVO.sumContinuingEducation
                ? item.specialAdditionalDetailVO.sumContinuingEducation
                : "";
              this.dataList[index].sumChildCare = item.specialAdditionalDetailVO.sumChildCare
                ? item.specialAdditionalDetailVO.sumChildCare
                : "";
              this.dataList[index].sumIndividualPensions = item.specialAdditionalDetailVO.sumIndividualPensions
                ? item.specialAdditionalDetailVO.sumIndividualPensions
                : "";
              //
              this.dataList[index].monthlyChildEducation = item.specialAdditionalDetailVO.monthlyChildEducation
                ? item.specialAdditionalDetailVO.monthlyChildEducation
                : "";
              this.dataList[index].monthlyContinuingEducation = item.specialAdditionalDetailVO.monthlyContinuingEducation
                ? item.specialAdditionalDetailVO.monthlyContinuingEducation
                : "";
              this.dataList[index].monthlyHomeLoanInterest = item.specialAdditionalDetailVO.monthlyHomeLoanInterest
                ? item.specialAdditionalDetailVO.monthlyHomeLoanInterest
                : "";
              this.dataList[index].monthlyHousingRent = item.specialAdditionalDetailVO.monthlyHousingRent
                ? item.specialAdditionalDetailVO.monthlyHousingRent
                : "";
              this.dataList[index].monthlySupportOldMan = item.specialAdditionalDetailVO.monthlySupportOldMan
                ? item.specialAdditionalDetailVO.monthlySupportOldMan
                : "";
              this.dataList[index].monthlyChildCare = item.specialAdditionalDetailVO.monthlyChildCare
                ? item.specialAdditionalDetailVO.monthlyChildCare
                : "";
              this.dataList[index].individualPensions = item.specialAdditionalDetailVO.individualPensions
                ? item.specialAdditionalDetailVO.individualPensions
                : "";
            }
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
$body-width: calc(100% - 338px);
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.head {
  padding: 20px;
  padding-bottom: 0;
  padding-top: 8px;
  width: 100%;
  display: flex;
  text-align: center;
  line-height: 60px;
  justify-content: space-between;
  .anticon-left {
    color: #595959;
    font-size: 20px;
    margin-top: 18px;
  }
  .left2 {
    z-index: 3;
    left: 65px;
    position: absolute;
    color: #595959;
    font-size: 16px;
    margin-top: -3px;
  }
}
.tableBox {
  padding-left: 20px;
  padding-right: 20px;
}
.modal-box2 {
  // padding: 20px 30px 30px;
  margin-bottom: 20px;
  text-align: center;
  .set-btn {
    margin-top: 40px;
  }
}
.edit {
  color: var(--primary);
}
.onwork {
  background-color: #faf9f9;
  border-radius: 10px;
  border: 1px solid #e8e8e8;
  padding: 30px 18px;
  display: flex;
  flex-flow: column;
  align-items: center;
  width: 33%;
  &:hover {
    display: flex;
    flex-flow: column;
    align-items: center;
    width: 33%;
    padding: 30px 18px;
    border: 1px solid rgba(232, 232, 232, 1);
    border-radius: 10px;
    background: rgba(240, 240, 240, 1);
  }
}
</style>
